<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>免挂通道管理</title>
    <link rel="stylesheet" href="<?=userassets?>component/pear/css/pear.css" />
    <style>
        .main-container {
            padding: 15px;
            background-color: #fff;
        }
        .notice-bar {
            background: #fff2f0;
            padding: 8px 12px;
            margin-bottom: 15px;
            color: #ff4d4f;
            font-size: 13px;
            display: flex;
            align-items: center;
            gap: 8px;
        }
        .status-container {
            display: flex;
            margin-bottom: 15px;
            background: #fff;
            font-size: 13px;
        }
        .status-box {
            flex: 1;
            padding: 10px 15px;
        }
        .status-box + .status-box {
            border-left: 1px solid #f0f0f0;
        }
        .status-title {
            color: #333;
            margin-bottom: 8px;
        }
        .status-items {
            display: flex;
            gap: 15px;
            color: #666;
        }
        .status-item {
            display: flex;
            align-items: center;
            gap: 4px;
        }
        .button-row {
            display: flex;
            justify-content: space-between;
            margin: 15px 0;
        }
        .button-group {
            display: flex;
            gap: 8px;
        }
        .custom-btn {
            height: 28px;
            line-height: 26px;
            padding: 0 12px;
            font-size: 13px;
            border-radius: 2px;
            display: inline-flex;
            align-items: center;
            gap: 4px;
        }
        .btn-blue {
            background: #1e9fff;
            color: #fff;
            border: none;
        }
        .btn-green {
            background: #5fb878;
            color: #fff;
            border: none;
        }
        .layui-table-view {
            margin: 0;
        }
        .qr-popup-content {
            padding: 20px;
            text-align: center;
        }
        .qr-popup-content h3 {
          margin-bottom: 10px;
        }
        .qr-popup-content p {
            margin-bottom: 15px;
        }
        .qr-popup-content .qr-code-container {
          margin: auto;
          width: 200px; 
          height: 200px;
          border: 1px solid green;
          display: flex;
          justify-content: center;
          align-items: center;
        }
        .qr-popup-content .qr-code-container img {
            max-width: 100%;
            max-height: 100%;
            display: block;
        }
       .qr-popup-content .qr-time-text {
            margin-top: 15px;
            font-size: 12px;
            color: #888;
       }
    </style>
</head>
<body class="pear-container">
    <?php if ($my == "list") : ?>
        <div class="main-container">
            <!-- 通知栏 -->
            <div class="notice-bar">
                <i class="layui-icon layui-icon-about"></i>
                <?=$this->conf->erweimagg?>
            </div>
            <!-- 状态统计 -->
            <div class="status-container">
                <div class="status-box">
                    <div class="status-title">正常：</div>
                    <div class="status-items">
                        <div class="status-item">
                            支付宝：<div id ="alipaysuccess">0</div>个
                        </div>
                        <div class="status-item">
                            微信：<div id ="wxpaysuccess">0</div>个
                        </div>
                        <div class="status-item">
                            QQ钱包：<div id ="qqpaysuccess">0</div>个
                        </div>
                    </div>
                </div>
                <div class="status-box">
                    <div class="status-title">失效：</div>
                    <div class="status-items">
                        <div class="status-item" >
                            支付宝：<div id ="alipayfail">0</div>个
                        </div>
                        <div class="status-item">
                            微信：<div id ="wxpayfail">0</div>个
                        </div>
                        <div class="status-item">
                            QQ钱包：<div id ="qqpayfail">0</div>个
                        </div>
                    </div>
                </div>
            </div>
            <!-- 数据表格 -->
            <table id="dataTable" lay-filter="dataTable"></table>
        </div>
        <script type="text/html" id="toolbar">
            <div class="pear-btn pear-btn-primary pear-btn-md">
                <button class="custom-btn btn-blue" lay-event="uid">获取支付宝UID</button>
                <button class="custom-btn btn-blue" lay-event="add">新增通道 (当前: <div id="allqrlist">0</div>/最大: <div id="maxqrlist">0</div>)</button>
            </div>
        </script>
        <script type="text/html" id="tableBar">
            <a class="layui-btn layui-btn-blue layui-btn-xs" lay-event="update">更新</a>
            <a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="edit">编辑</a>
            <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
        </script>
    <?php endif; ?>
    <?php if($my == 'add'):
        include usertem . 'add_qrlist.php';
    endif;
    ?>
    <?php if($my == 'edit'):
        include usertem . 'edit_qrlist.php';
    endif;
    ?>
    <script type="text/html" id ="qrcode">
        <div class="qr-popup-content">
          <input type="hidden" name="Up_id" id="Up_id" value=""/>
          <p id="Up_LoginQrcode_msg">请用对应二维码的支付宝或QQ扫码哦</p>
          <div id="Up_LoginQrcode"></div>
      </div>
     </script>
     <script type="text/html" id ="uid">
        <div class="qr-popup-content">
          <p>请用手机支付宝 扫码 并复制其中的 user_id 即可 如 20*****93 然后填入 支付宝 uid里面即可</p>
          <img class="qr-code-container" src="/assets/img/uid.png"/>
      </div>
     </script>
    <script src="<?=userassets?>component/layui/layui.js"></script>
    <script src="<?=userassets?>component/pear/pear.js"></script>
    <script src="<?=userassets?>core_js/qrlist.js?v=<?=time()?>"></script>
    <script src="<?=userassets?>core_js/add_qrlist.js?v=<?=time()?>"></script>
    <script src="<?=userassets?>core_js/up_qrlist.js?v=<?=time()?>"></script>
</body>
</html>